<template>
  <div class="pay-base">
    <div class="title">移动积分兑换饿了么-支付宝红包</div>
    <div class="main">
      <van-loading
        v-if="ajaxLoading"
        size="24px"
        vertical
        text-color="#0094ff"
        color="#0094ff"
        >加载中...</van-loading
      >
      <div v-else>
        <!-- <div class="tel">
          您的兑换手机号码:{{ form.account }} 您的积分余额:<span class="blue">{{
            maxUseIntegral
          }}</span>
        </div> -->
        <div
          :class="
            shopList.length > 2 ? 'envelope' : 'envelope' + shopList.length
          "
        >
          <div
            v-for="(item, index) in shopList"
            :class="
              activeIndex === index ? 'envelope-red active' : 'envelope-red'
            "
            :key="item.name"
            @click="onSelectItem(item, index)"
          >
            <span>{{ item.name }}</span>
          </div>
        </div>
        <div class="tel-item">
          <input
            v-model="form.account"
            placeholder="请输入中国移动手机号码"
            maxlength="11"
            type="number"
            style="width: 100%"
          />
        </div>
      </div>
      <div class="btns">
        <van-button class="cancle">取消</van-button>
        <van-button
          class="exchange"
          @click="onConfirmChange"
          :loading="changeLoading"
          >兑换</van-button
        >
      </div>
    </div>
    <van-action-sheet
      v-model="showPay"
      title="饿了么-支付宝红包兑换"
      @cancel="onCancelSubmit"
    >
      <div class="layer">
        <!-- <div class="sub-title">您的手机号{{ form.account }}正在兑换</div> -->
        <div class="sub-title">
          您的兑换手机号码:{{ form.account }} 您的积分余额:<span class="blue">{{
            maxUseIntegral
          }}</span>
        </div>
        <div class="envelope-active">
          <div class="envelope-red">
            <span>{{ selectName }}</span>
          </div>
          <span>+</span>
          <img :src="minusImg" class="minus" />
          <div class="tooltip-text">
            兑换之日起1天有效(兑换有效期至2024年2月25日)，仅限外卖零售百货美妆订单使用、限指指定会场商家使用。
          </div>
        </div>

        <div class="warn">
          <span>温馨提醒： </span>
          您本次兑换需要{{
            integralPrice
          }}积分，兑换成功后将从您的移动手机账号扣除{{ integralPrice }}积分。
        </div>
        <div class="tel-item">
          <div class="code">
            <input
              v-model="orderRes.checkCode"
              placeholder="6位验证码"
              max="6"
              type="number"
            />
            <van-button
              :disabled="codeDisabled"
              class="button"
              @click="onOrderCreate"
              >{{ codeText
              }}<span v-show="time !== 60">{{ time }}</span></van-button
            >
          </div>
        </div>
        <div class="btns">
          <van-button class="cancle" @click="onCancelSubmit"
            >残忍拒绝</van-button
          >
          <van-button
            :loading="confirmLoading"
            class="exchange"
            @click="onSubmit"
            >确认兑换</van-button
          >
        </div>
      </div>
    </van-action-sheet>
  </div>
</template>
<script>
import {
  integralQuery,
  orderCreate,
  orderPay,
  // getGoodsList,
  getElmMobRelList,
} from "@/api";
const regex = /^1[3-9]\d{9}$/;
export default {
  name: "common-advertise",
  props: {
    title: String,
  },
  data() {
    return {
      form: {
        account: "",
        code: "",
        num: 1,
      },
      orderRes: {
        checkCode: "",
        orderId: "",
        account: "",
      },
      integralPrice: 180,
      selectName: "",
      shopList: [],
      showPay: false,
      codeDisabled: false,
      time: 60,
      maxUseIntegral: 0,
      activeIndex: 0,
      ajaxLoading: false,
      changeLoading: false,
      confirmLoading: false,
      codeText: "获取验证码",
      minusImg: require("@/assets/img/minus.jpg"),
    };
  },
  created() {
    this.getGoodsList();
  },
  methods: {
    // 获取商品列表
    getGoodsList() {
      this.ajaxLoading = true;
      getElmMobRelList()
        .then(({ data }) => {
          if (data && data.length > 0) {
            this.shopList = data.sort((a, b) => a.money - b.money);
            this.form.code = data[0].code;
            this.selectName = data[0].name;
          }
        })
        .catch((err) => {
          console.error(err);
        })
        .finally(() => {
          this.ajaxLoading = false;
        });
    },
    // 获取积分
    getIntegralQuery() {
      this.changeLoading = true;
      integralQuery({ account: this.form.account })
        .then(({ data }) => {
          this.maxUseIntegral = data.maxUseIntegral;
        })
        .catch((err) => {
          console.error(err);
        })
        .finally(() => {
          this.changeLoading = false;
          this.showPay = true;
        });
    },
    onConfirmChange() {
      if (!this.form.account) {
        this.$toast.fail("手机号码不能为空！");
        return;
      }
      if (!regex.test(this.form.account)) {
        this.$toast.fail("请输入正确的手机号码！");
        return;
      }
      this.getIntegralQuery();
    },
    // 创建积分订单 获取验证码
    onOrderCreate() {
      if (this.integralPrice > this.maxUseIntegral) {
        this.$toast.fail(
          `需要${this.integralPrice}积分，您账户积分不足，无法兑换！`
        );
        return;
      }
      this.codeDisabled = true;
      const timer = setInterval(() => {
        this.time--;
        if (this.time === 0) {
          this.time = 60;
          clearInterval(timer);
          this.codeDisabled = false;
        }
      }, 1000);
      orderCreate(this.form).then(({ success, data }) => {
        if (success) {
          this.orderRes.orderId = data.orderNo;
          this.orderRes.account = data.account;
        } else {
          this.time = 60;
          clearInterval(timer);
          this.codeDisabled = false;
        }
      });
    },
    onSubmit() {
      if (
        !this.orderRes.checkCode ||
        !this.orderRes.account ||
        !this.orderRes.orderId
      ) {
        this.$toast.fail("请先获取手机验证码！");
        return;
      }
      this.confirmLoading = true;
      orderPay(this.orderRes)
        .then(({ success }) => {
          let status = success ? "success" : "error";
          this.$router.push({
            path: "/result",
            query: { status },
          });
        })
        .catch(() => {
          this.$router.push({
            path: "/result",
            query: { status: "error" },
          });
        })
        .finally(() => {
          this.confirmLoading = false;
        });
    },
    onCancelSubmit() {
      this.showPay = false;
      this.orderRes.checkCode = "";
      this.orderRes.orderId = "";
    },

    onSelectItem(item, index) {
      this.activeIndex = index;
      this.form.code = item.code;
      this.integralPrice = item.integralPrice;
      this.selectName = item.name;
    },
  },
};
</script>

<style lang="less" scoped>
.pay-base {
  display: flex;
  flex-direction: column;
  background-color: #fff;
  border-radius: 1rem;
  .van-action-sheet {
    min-height: 50%;
  }
  .envelope-red {
    background: url("@/assets/img/red_bg.jpg");
    position: relative;
    color: #fff;
    background-size: 100% 100%;
    width: 6rem;
    height: 6rem;
    border-radius: 0.8rem;
    float: left;
    margin-bottom: 0.8rem;
    margin-right: calc((100% - 18rem) / 2);
    &:nth-of-type(3n) {
      margin-right: 0;
    }
    &.active {
      width: 6rem;
      height: 6rem;
      background: url("@/assets/img/red_bg_active.jpg");
      background-size: 100% 100%;
    }

    span {
      position: absolute;
      bottom: 0.1rem;
      height: 2rem;
      overflow: hidden;
      box-sizing: border-box;
      font-size: 0.7rem;
      left: 0;
      width: 100%;
    }
  }
  .envelope-active {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.8rem;
    position: relative;
    > span {
      color: red;
      font-weight: 600;
      font-size: 18px;
      margin: 0 1rem;
    }
    .envelope-red {
      margin-right: 0;
      margin-bottom: 0;
    }
    .minus {
      width: 6rem;
      height: 6rem;
      border-radius: 0.8rem;
    }

    .tooltip {
      display: inline-block;
    }

    .tooltip-text {
      background-color: #eff8fd;
      border: 0.1rem solid #dfe0e2;
      text-align: center;
      padding: 0.4rem;
      border-radius: 0.8rem;
      position: absolute;
      z-index: 1;
      bottom: -2.8rem;
      left: 0;
      text-align: left;
      font-size: 0.7rem;
      color: #0496e3;
      box-sizing: border-box;
    }

    .tooltip-text::before {
      content: "";
      position: absolute;
      bottom: 100%;
      left: 60%;
      margin-left: -5px;
      border-width: 0 5px 10px 5px;
      border-style: solid;
      border-color: transparent transparent #dfe0e2 transparent;
    }

    .tooltip-text::after {
      content: "";
      position: absolute;
      bottom: 100%;
      left: 60%;
      margin-left: -4px;
      border-width: 0 4px 9px 4px;
      border-style: solid;
      border-color: transparent transparent #eff8fd transparent;
    }
  }

  .tel-item {
    margin: 0.8rem 0;
    width: 100%;
    input {
      height: 3rem;
      box-sizing: border-box;
      border: none;
      background-color: #eef8fd;
      border-radius: 0.4rem;
      padding: 0 1rem;
    }
    .code {
      display: flex;
      width: 100%;
      input {
        flex: 7;
      }
      .button {
        flex: 3;
        background-color: #0496e3;
        height: 3rem;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #fff;
        border-radius: 0.4rem;
        margin-left: 1rem;
        font-size: 0.8rem;
      }
    }
  }
  .btns {
    display: flex;
    width: 100%;
    margin-bottom: 0.8rem;
    button {
      flex: 1;
      border-radius: 2rem;
      height: 3rem;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1rem;
      font-weight: 600;
    }
    .cancle {
      background-color: #f4f4f4;
      color: #b5b5b5;
      margin-right: 1rem;
    }
    .exchange {
      background-color: #fac467;
      color: #010101;
    }
  }
  .title {
    color: #fac467;
    // background-color: #ecf1f4;
    height: 3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 1rem 1rem 0 0;
    font-weight: 600;
  }
  .main {
    padding: 0 1rem;
    box-sizing: border-box;
    .tel {
      font-size: 1rem;
      width: 100%;
      text-align: left;
      font-size: 1rem;
      .blue {
        color: #0496e3;
      }
    }
    .envelope {
      margin: 1rem 0;
      height: auto;
      overflow: hidden;
    }

    .envelope1 {
      display: flex;
      justify-content: center;
      margin: 1rem 0;
      height: auto;
      overflow: hidden;
      .envelope-red {
        margin-right: 0;
      }
    }

    .envelope2 {
      display: flex;
      justify-content: center;
      margin: 1rem 0;
      height: auto;
      overflow: hidden;
      .envelope-red {
        margin: 0 1rem;
      }
    }
  }
  .layer {
    margin: 0.4rem 1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    border-radius: 1rem;
    .sub-title {
      color: #0496e3;
      font-size: 1rem;
      margin-bottom: 0.8rem;
    }

    .warn {
      width: 100%;
      text-align: left;
      color: #f47a39;
      font-size: 0.8rem;
      margin-top: 2.4rem;
      span {
        display: block;
        font-weight: 600;
      }
    }
  }
}
</style>
